<template>
	<view class="flex-row ">
		<view :style="getStyle()" class="vertical-line "></view>
		<text class="text-lg text-bold margin-left-xs" style="">{{text}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			//标题
			text: {
				type: String,
				default () {
					return '智慧服务'
				}
			},
			bgColor: {
				type: String,
				default () {
					return '#498bf8'
				}
			}
		},
		computed: {
			getStyle() {
				console.log(this.bgColor)
				return '--bgColor': this.bgColor
				// return "background-color:" + this.bgColor
			}
		}
	}
</script>

<style>
	/* 竖线样式 */
	.vertical-line {
		width: 4px;
		height: 22px;
		margin-right: 4px;
		border-radius: 10rpx;
		background-color: var(--bgColor); 
	}
</style>